<template>
  <div class="footer_page">
    <div class="introduction">
      <div class="content_top">
        <div class="company">
          <div class="company_le">
            <img class="company_logo" src="../assets/default/6.png" alt="" />
            <img class="company_name" src="../assets/default/9.png" alt="" />
          </div>
          <div class="company_ri">
            <div class="company_address">
              <div>学校地址：{{ footerData.xuexiaodizhi }}</div>
              <img @click="copyCode(footerData.xuexiaodizhi)" src="../assets/default/7.png" alt="" />
            </div>
            <div class="company_phone">
              电话：{{ footerData.xuexiaodianhua }}
            </div>
          </div>
        </div>
        <div class="kefu" @click="openKefu">
          <img class="company_name" src="../assets/default/8.png" alt="" />
          <div>联系在线客服</div>
        </div>
      </div>
      <div class="content_bottom">
        <div class="bottom_1">
          <div class="agreement_item" @click="seeAgreement(1)">用户协议</div>
          <div class="agreement_line"></div>
          <div class="agreement_item" @click="seeAgreement(2)">隐私声明</div>
          <div class="agreement_line"></div>
          <div class="agreement_item" @click="goHelp">帮助中心</div>
          <div class="agreement_line"></div>
          <div class="agreement_item" @click="goFeedBook">意见反馈</div>
          <div class="agreement_line"></div>
          <div class="agreement_item" @click="goAboutUs">关于我们</div>
          <div class="agreement_line"></div>
          <div class="agreement_item" @click="openKefu">在线客服</div>
        </div>
        <div class="bottom_2">
          <div class="bottom_2_tip">主管单位：{{ footerData.zhuguan }}</div>
          <div class="bottom_2_tip">主办单位：{{ footerData.zhuban }}</div>
          <div class="bottom_2_tip">版权所有：{{ footerData.banquan }}</div>
          <div class="bottom_2_tip">备案号：{{ footerData.beian }}</div>
        </div>
      </div>
    </div>
  </div>
  <viewAgreement ref="agreement" :score="agreementType"></viewAgreement>

  <kefu ref="kefuText"></kefu>
</template>

<script name="footerPage" setup>
import { copyDomText } from "@/utils/common.js";
import viewAgreement from "@/components/viewAgreement.vue";
import kefu from "@/components/kefu.vue"
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { post661f3f1d4b57a } from "@/utils/api.js";
const router = useRouter();
let agreementType = ref(1);
let agreement = ref(null);
onMounted(() => {
  getData();
});
let footerData = reactive({});
function getData() {
  post661f3f1d4b57a().then((res) => {
    if (res.code == 1) {
      footerData = Object.assign(footerData, res.data);
    }
  });
}
function seeAgreement(type) {
  agreementType.value = type;
  agreement.value.openPopup();
}
function goHelp() {
  router.push({
    path: "/setUp/helpCenter",
  });
}
function goAboutUs() {
  router.push({
    path: "/setUp/aboutUs",
  });
}
function goFeedBook() {
  router.push({
    path: "/setUp/feedBook",
  });
}
// 复制地址
function copyCode(code) {
  copyDomText(code);
}

let kefuText = ref(null);
function openKefu() {
  kefuText.value.openPopup();
}
</script>

<style lang="scss" scoped>
.footer_page {
  flex: 1;
  // height: 172.5px;
  background: url(../assets/default/5.png) no-repeat;
  background-size: 100% 100%;
}
.introduction {
  width: 720px;
  height: 100%;
  margin: 0 auto;
  .content_top {
    width: 100%;
    padding: 14.5px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #fff;
    .company {
      display: flex;
      align-items: center;
      .company_le {
        display: flex;
        align-items: center;
        .company_log {
          width: 36px;
          height: 36px;
        }
        .company_name {
          width: 80px;
          height: 20px;
          margin-left: 7px;
        }
      }
      .company_ri {
        margin-left: 20px;
        .company_address {
          font-size: 9px;
          font-weight: 500;
          color: #fff;
          display: flex;
          align-items: center;
          img {
            width: 10px;
            height: 10px;
            margin-left: 5px;
            cursor: pointer;
          }
        }
        .company_phone {
          margin-top: 6px;
          font-size: 9px;
          font-weight: 500;
          color: #fff;
        }
      }
    }
    .kefu {
      text-align: center;
      font-size: 7px;
      color: #fff;
      cursor: pointer;
      img {
        width: 28px;
        height: 28px;
        margin-bottom: 6px;
      }
    }
  }
  .content_bottom {
    padding: 10px 0 17px;
    .bottom_1 {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .agreement_item {
        font-size: 9px;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
      }
      .agreement_line {
        width: 1px;
        height: 8px;
        margin: 0 10px;
        background: #fff;
      }
    }
    .bottom_2 {
      .bottom_2_tip {
        margin-top: 8px;
        font-size: 8px;
        color: #fff;
        opacity: 0.8;
      }
    }
  }
}
</style>